<template>
  <div class="search-container">
    <!-- 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。右下角按钮 -->
    <!-- 搜索框区域开始 -->
    <!-- ```注意加rom表单这里属于兼容性处理``` ios要处理其他不需要处理-->
    <!-- class="search-form"设置一个class来做固定定位 -->
    <form action="/" class="search-form">
      <!-- show-action显示右侧取消 -->
      <!--  @cancel="onCancel"取消事件 -->
      <!-- 再次在输入框输入内容以后发现不展示联想建议，这时候需要在输入框聚焦以后，将isResultShow 设置为 false -->
      <!-- clearable	是否启用清除图标，点击清除图标后会清空输入框 -->
      <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @clear="searchText = ''"
        @cancel="onCancel"
        @search="onSearch"
        @focus="isResultShow = false"
      />
    </form>
    <!-- 搜索框区域结束 -->

    <!-- 1搜索结果开始 【1显23隐】-->
    <!-- v-if="isResultShow"通过是否有搜索结果来判断显示搜索结果组件 -->
    <!-- 将搜索文本值searchText传递给 search-result 组件 -->
    <SearchResult v-if="isResultShow" :search-text="searchText"></SearchResult>
    <!-- 搜索结果结束 -->

    <!-- 2联想建议开始 【2显13隐】-->
    <!-- 搜索框绑定变量searchText 中有没有值，判断是否展示联想建议组件 -->
    <!-- 将搜索的关键字使用 v-bind 方式将值传入联想建议组件 -->
    <!-- 父组件中使用 $on 接收到传递的值 -->
    <SearchSuggestion
      v-else-if="searchText"
      :search-text="searchText"
      @searchsoucre="onSearch"
    ></SearchSuggestion>
    <!-- 联想建议结束 -->

    <!-- 3历史记录开始 【3显23隐】-->
    <!-- 前面搜索结果组件和联想建议组件都没有展示就展示历史记录组件 -->
    <!-- 将搜索历史记录传递给子组件 -->
    <!-- 监听到子组件广播的删除全部；直接将历史记录数组置空 -->
    <!-- 非删除状态，直接通过onSearch进入搜索 -->
    <SearchHistory
      v-else
      :search-histories="searchHistories"
      @clear-search-histories="searchHistories = []"
      @search="onSearch"
    ></SearchHistory>
    <!-- 历史记录结束 -->
  </div>
</template>

<script>
// 历史记录、联想建议、搜索结果 3个区域子组件
import searchHistory from "./components/search-history.vue";
import searchSuggestion from "./components/search-suggestion.vue";
import searchResult from "./components/search-result.vue";
// 导入设置本地存储的工具js
import { setItem, getItem } from "@/utils/storage";
export default {
  name: "SearchIndex",
  data() {
    return {
      // 搜索文本
      searchText: "",
      // 控制搜索结果的显示状态
      isResultShow: false,
      // 存储历史记录
      // searchHistories: [],
      searchHistories: getItem("TOUTIAO_SEARCH_HISTORY") || [],
    };
  },
  components: {
    SearchHistory: searchHistory,
    SearchSuggestion: searchSuggestion,
    SearchResult: searchResult,
  },
  // 利用 watch 监视统一存储历史记录的数据
  watch: {
    searchHistories: {
      handler(value) {
        // 存储历史记录到本地
        setItem("TOUTIAO_SEARCH_HISTORY", value);
      },
    },
  },
  methods: {
    onSearch(val) {
      // ``更新文本框的内容``
      // 在事件处理程序中， 将值并在输入框展示
      // 第一种情况直接回车调用的onSearch方法val就是输入框的值
      // 第二种情况是搜索建议子组件传过来的cell项值

      this.searchText = val;

      // ``存储搜索历史记录``应该在``更新文本框的内容``之后； ``渲染搜索结果`之前
      // 不要有重复历史记录、最新的排在最前面
      const index = this.searchHistories.indexOf(val);
      if (index !== -1) {
        // 如果有重复的就先删除原有的记录
        this.searchHistories.splice(index, 1);
      }
      console.log("历史记录数据项", val);
      // 将搜索记录添加到顶部
      this.searchHistories.unshift(val);
      console.log(val);
      // ``渲染搜索结果``
      // 在用户按回车(或者点击搜索建议和点击非删除状态历史记录项)以后，onSearch 事件中将 isResultShow 设置为 true，展示搜索结果组件
      this.isResultShow = true;
    },
    onClear() {
      this.$forceUpdate();
      console.log("取消事件");
      this.searchText = "";
    },
    onCancel() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="less">
.search-container {
  // 一个搜索组件高度，防止有内容被遮盖
  padding-top: 108px;
  .van-search__action {
    color: #fff;
  }
  // 给搜索组件设置固定定位
  .search-form {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
  }
}
</style>
